* {
    margin: 0;
    padding: 0;
    list-style: none;
}

@function rem ($n) {
    @return $n/75*2rem
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #F6F6F6;
}

header {
    width: 100vw;
    height: rem(45);
    line-height: rem(45);
    // background-color: blue;
    display: flex;
    background-color: #C82519;
    // justify-content: center;
    align-items: center;

    .outer {
        height: rem(40);
        width: 100vw;
        display: flex;

        >div {
            display: inline-block;
        }

        .left {
            height: rem(40);
            width: rem(40);
            text-align: center;
            line-height: rem(40);
            // text-indent: rem(8);
            margin: 0 rem(10);

            .icon-caidan {
                font-size: rem(30);
                color: #FFFFFF;
            }
        }

        .middle {
            flex: 1;
            background-color: aqua;
            display: flex;
            background-color: #FFFFFF;
            border-radius: rem(30);
            height: rem(30);
            margin: rem(5) 0;

            .inner_left {
                height: rem(30);
                width: rem(40);
                line-height: rem(30);
                text-align: center;
                color: #E93B3D;
                display: flex;
                align-items: center;

                // border-right: 1px solid #DDDDDD;
                span {
                    display: inline-block;
                    height: rem(20);
                    width: rem(40);
                    line-height: rem(20);
                    text-align: center;
                    border-right: 1px solid #DDDDDD;
                    font-size: rem(14);
                }
            }

            .inner_middle {
                display: flex;
                align-items: center;
                height: rem(30);
                line-height: rem(30);

                .icon-fangdajing {
                    text-align: center;
                    height: rem(20);
                    width: rem(30);
                    line-height: rem(20);
                    // border-right: 1px solid #DDDDDD;
                    color: #B7B7B7;
                    font-size: rem(20);
                }
            }

            .inner_right {
                height: rem(30);
                line-height: rem(30);

                #searching {
                    outline: none;
                    border: 0;
                    font-size: rem(12);
                }

                #searching:focus {
                    outline: none;
                    border: 0;
                }
            }
        }

        .right {


            p {
                text-align: center;
                height: rem(40);
                width: rem(50);
                color: #FFFFFF;
                font-size: rem(14);
                line-height: rem(36);
            }
        }
    }



}

main {
    width: 100vw;
    flex: 1;
    overflow: auto;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;

    .banner {
        background: #F6F6F6 url(../img/无标题.png) no-repeat;
        height: rem(140);
        width: 100vw;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: 50% 0;

        .swiper {
            --swiper-theme-color: #ff6600;
            // --swiper-pagination-color: #00ff33;
            /* 两种都可以 */
        }

        .swiper {
            width: 94vw;
            height: rem(140);
            border-radius: rem(10);

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

}

.other {
    width: 100vw;
    margin-top: rem(15);

    .page1,
    .page2 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        height: rem(145);

        .little_box {
            width: 20%;
            text-align: center;

            img {
                width: 60%;
            }
        }
    }

    .swiper-pagination {
        position: relative;

        // top: rem(20);
        // width: rem();
        .swiper-pagination-bullet {
            width: rem(6);
            height: rem(6);
        }

        .my-bullet-active {
            background: #ff6600;
            opacity: 1;
        }
    }
}

.floor-container {
    width: 95vw;
    background-color: #FFFFFF;
    height: rem(132);
    border-radius: rem(10);

    .title_wrap {
        display: flex;

        align-items: center;
        justify-content: space-between;
        height: rem(35);
        width: 100%;
        text-indent: rem(10);
        background-size: 100% 100%;
        background: url() no-repeat;

        .left {
            display: flex;
            display: inline-block;

            span:nth-child(1) {
                font-size: rem(14);
            }

            span:nth-child(2) {
                font-size: rem(14);
                color: red;
                text-indent: rem(8);
                display: inline-block;
            }

            span:nth-child(2):after {
                width: rem(30);
                height: rem(20);
                vertical-align: middle;
                content: "";
                display: inline-block;
                background-image: url(//wq.360buyimg.com/jdm-home-page/pages/images/seckill-time-to_1de70c91.png);
                background-size: contain;
                background-repeat: no-repeat;
            }

            p {
                width: rem(14);
                display: inline-block;
                text-indent: rem(0);
                background-color: #fa2c19;
                border-radius: rem(3);
                height: rem(18);
                color: #F6F6F6;
                width: rem(16);

            }


        }

        .right {
            width: rem(90);
            font-size: rem(12);
            text-indent: rem(-20);
            color: red;
        }

    }

    .contain_wrap {
        width: 95%;
        height: rem(100);
        text-indent: rem(10);

        .goods::-webkit-scrollbar {
            width: 0;
        }

        .goods {
            width: 100%;
            height: rem(100);
            text-indent: rem(10);
            display: flex;
            overflow: auto;
            // white-space: nowrap;

            .goods_info {
                box-sizing: border-box;
                width: rem(55);
                height: rem(80);
                padding-top: rem(8);

                img {
                    width: rem(53);
                    height: rem(53);
                }

                p {
                    color: #fa2c19;
                    margin-top: rem(3);
                    font-weight: 600;
                }
            }
        }
    }

}




footer {
    width: 100vw;
    height: rem(50);
    background-color: white;
    display: flex;
    justify-content: center;
    text-indent: rem(10);

    .big {
        width: 100%;
        display: flex;
        align-items: center;

        .box_5 {
            float: 1;

            img {
                width: 80%;
            }
        }
    }

}